<template>
    <div class="header">
        <div class="header-top"></div>
        <div class="header-bottom"> 
            <div>
                <!-- 首页 -->
                <div class="header-small" @click="leftClick" v-if="path=='/home'">
                <img src="/img/header/small.png">
            </div>
            <!-- 发现 -->
             <div class="header-small" @click="leftClick" v-if="path=='/order'">
                <img src="/img/header/person.png">
            </div>
            </div>

           <div class="header-text-box">
                <div class="header-text" v-if="path=='/home'"
                    @click="centerClick"
                > 
                    <span>路畅科技产业园</span>
                    <span class="fa fa-sort-desc"></span>
                </div>
                <!-- 分类 -->
                <p class="find-box" v-if="path=='/find'">分类</p>

                <!-- 发现 -->
                <p class="find-box" v-if="path=='/order'">发现</p>

                <!-- 购物车 -->
                <p class="find-box" 
                    v-if="path=='/mine'">购物车</p>

           </div>
            
           <div class="header-search-box">
               <!-- 首页 -->
                <div class="header-search"
                     v-if="path=='/home'"
                     @click="rightClick"
                >
                    <img src="/img/header/search.png">
                </div>
                <!-- 发现 -->
                <div class="header-small header-alone" @click="rightClick" v-if="path=='/order'">
                    <img src="/img/header/wen.png">
                </div>
                <!-- 购物车 -->
                <p class="mine-right" @click="rightClick" v-if="path=='/mine'">{{compile}}</p>
           </div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      path: "",
      compile: "编辑"
    };
  },
  activated() {
    this.path = this.$route.path;
  },
  methods: {
    leftClick() {
      this.$emit("leftClick");
    },
    centerClick() {},
    rightClick() {
      this.$emit("rightClick");
    }
  }
};
</script>

<style scoped>
.header {
  width: 100%;
  background-color: rgb(109, 219, 201);
}
.header-top {
  height: 9vw;
}
.header-bottom {
  padding: 0 1vw;
  height: 15vw;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.header-small {
  cursor: pointer;
  position: relative;
  top: 1vw;
  margin-left: 3vw;
  width: 8vw;
  height: 10vw;
}
.header-small img {
  width: 100%;
}
.header-text-box {
  width: 50vw;
  height: 10vw;
  border-radius: 5vw;
  overflow: hidden;
  text-align: center;
  position: relative;
  bottom: -1.5vw;
}
.header-text {
  width: 50vw;
  height: 10vw;
  background-color: white;
  text-align: center;
  font-size: 4vw;
  line-height: 10vw;
  color: rgb(109, 219, 201);
  box-sizing: border-box;
  font-weight: bold;
  cursor: pointer;
}
.header-search-box {
  margin-right: 3vw;
  width: 10vw;
  height: 7vw;
}
.header-search {
  cursor: pointer;
  margin-right: 3vw;
  width: 8vw;
  height: 7vw;
  position: relative;
  top: 2vw;
}
.header-search img {
  width: 100%;
}
.find-box {
  font-size: 7vw;
  color: white;
  padding-left: 4vw;
}
.mine-right {
  color: white;
  font-size: 4vw;
  position: relative;
  top: 5vw;
}
.header-alone{
    width: 7vw;
    height: 9vw;
}
</style>